'use strict';
import React, {Component, PropTypes} from 'react';
import './style.less';
import ItemMask from './ItemMask.jsx';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

class SwiperBoxInner extends Component {
    constructor(props) {
        super(props);
        let {picItems,activeIndex,itemWidth,maskWidth,itemSpace,itemHeight} = this.props;

        this.state =  {
            delta: [0, 0],
            isPressed: false,
            left:(-itemWidth - itemSpace) + maskWidth +itemSpace
        };
        this.pressPos = [0,0];
    }
    componentWillUnmount(){}

    handleTouchStart(e) {
        this.handleMouseDown(e.touches[0]);
    }
    handleMouseDown({pageX, pageY}) {
        this.setState({
            isPressed: true,
            delta:[0, 0],
        });
        this.pressPos = [pageX, pageY];
    }

    handleMouseMove({pageX, pageY}) {
        const {isPressed} = this.state;
        let [px,py] = this.pressPos
        if (isPressed) {
            const delta = [pageX - px  , pageY - py];
            this.setState({delta});
        }
    }
    handleTouchMove(e) {
        e.preventDefault();
        this.handleMouseMove(e.touches[0]);
    }
    handleMouseUp() {
        this.pressPos = [0, 0];
        let left = this.state.left + this.state.delta[0];
        let scrollTo = this.state.delta[0] < 0 ?"right":"left";
        if(Math.abs(this.state.delta[0]) > 50){
            //console.log(this.state.delta[0],scrollTo)
            this.props.onChangIndex(scrollTo);
        }else{
            left = this.state.left;
        }
        if(this.state.isPressed){
            this.setState({left,isPressed: false, delta: [0, 0]});
        }
    }
    render() {
        const { isPressed, delta} = this.state;
        let style1;
        let left;
        if (isPressed) {
            left = this.state.left + delta[0];
        }else{
            left = this.state.left;
        }
        //console.log(style1)

        let {num,picItems,activeIndex,itemWidth,maskWidth,itemSpace,itemHeight} = this.props;
        let len = 3;
        //let left = (-itemWidth - itemSpace) + maskWidth +itemSpace;
        let style = {
            position:"absolute",
            top:0,
            bottom:0,
            left:left,
            right:-100,
            width:itemWidth*(len) + itemSpace*(len-1),
            height:itemHeight,
            fontSize:100,
            color:"white",
            textAlign:"center",
        };
        picItems = picItems.slice(0,num);
        let totalLength = picItems.length;
        let leftIndex = activeIndex - 1 ;
        let rightIndex = activeIndex + 1 ;
        if(leftIndex < 0){
            leftIndex = totalLength -1
        }
        if(rightIndex == totalLength){
            rightIndex = 0
        }
        //console.log({leftIndex,activeIndex,rightIndex,totalLength});
        //console.log(picItems.length)

        let items = [picItems[leftIndex],picItems[activeIndex],picItems[rightIndex]];

        //console.log(this.props.editMode)
        return (
            <div
                onMouseMove={this.handleMouseMove.bind(this)}
                onMouseUp={this.handleMouseUp.bind(this)}
                onTouchMove={this.handleTouchMove.bind(this)}
                onTouchEnd={this.handleMouseUp.bind(this)}
                style={style}
                onClick={::this.props.onClick}>
                {
                    items.map((row,i)=>{
                        let styleRow = {width:itemWidth,height:itemHeight};
                        if(!row.url) styleRow.backgroundColor = "#f7f7f7";
                        if(i == 1) {
                            styleRow.marginRight = itemSpace;
                            styleRow.marginLeft = itemSpace;
                        }
                        return (
                            <div
                                onMouseDown={this.handleMouseDown.bind(this)}
                                onTouchStart={this.handleTouchStart.bind(this)}
                                className={"itemSwiper"}
                                key={i}
                                style={styleRow}>
                                {
                                    row.url ? <img draggable={false} src={row.url} /> :null
                                }
                                {
                                    this.props.editMode ?
                                        <div className="editSerial"><i className="se">{activeIndex+1}</i></div>:null
                                }
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}
export default class SwiperBox extends Component {
    constructor( props ) {
        super( props );
    }
    render(){
        let {scrollTo,picItems,activeIndex,itemWidth,maskWidth,itemOffsetLeft,itemSpace,itemHeight} = this.props;
        let len = picItems.length;
        //console.log(activeIndex,scrollTo)
        return (
            <div style={{height:itemHeight}} className="swiper_wrap">

                <ReactCSSTransitionGroup
                    className="swiper_wrap"
                    component="div"
                    style={{height:itemHeight}}
                    transitionName={scrollTo}
                    transitionEnterTimeout={500}
                    transitionLeaveTimeout={500} >
                    <SwiperBoxInner onChangIndex={this.props.onChangeIndex} {...this.props} key={activeIndex}/>
                </ReactCSSTransitionGroup>
                <div className="before"
                     style={{left:maskWidth + itemSpace + 15 }}
                     onClick={this.props.onChangeIndex.bind(this,"left")}></div>
                <div className="after"
                     style={{right:maskWidth + itemSpace + 15}}
                     onClick={this.props.onChangeIndex.bind(this,"right")}></div>
                <ItemMask type="left" width={maskWidth} itemSpace={itemSpace}/>
                <ItemMask type="right" width={maskWidth} itemSpace={itemSpace}/>
            </div>

        );
    }

}


